<template>
  <div class="site">
    <!-- 头部标题 -->
    <header class="header">
      <router-link to="/auth/PersonalCenter" tag="div" class="header__left">
        <img src="./icon/back.png" alt="">
      </router-link>
      <span>地址管理</span>
    </header>
    <!-- 地址 -->
    <ul v-if="siteList.length !== 0" class="shippingAddress">
      <li class="shippingAddress__items"
          v-for="(item, key) in siteList"
          :key="key"
          @click="ToNewSite(siteList)"
      >
        <div class="name">
          <span class="items__name">{{item.name}}</span>
          <span  v-if="item.default" class="default">默认</span>
        </div>
        <div class="inDetail">
          <p class="phone">{{item.phone}}</p>
          <p>{{item.shippingAddress}}</p>
        </div>
        <img @click="del(key)" class="delete" src="./icon/delete.png" alt="">
      </li>
    </ul>

    <!-- 没有地址信息时 -->
    <div class="noAddress" v-show = "siteList.length === 0"></div>

    <!-- 新增地址 -->
    <router-link to="/myCommodity/new_site" tag="div" class="new">
      <div class="new__btn">+  新建地址</div>
    </router-link>
  </div>
</template>


<script>
import {mapState, mapGetters , mapMutations} from 'vuex';
export default {
  name: 'site',
  data() {
    return {
    }
  },
  methods: {
    ToNewSite(siteList){
      this.$router.push({path:'/myCommodity/new_site'});
      this.$bus.$emit('site', siteList)
    },
    ...mapMutations({
      remveList: 'site/remveList'
    }),
    del(key) {
      this.$dialog.alert({
        message: '确定删除该地址？',
        showCancelButton: true
      }).then( () => {
        this.remveList(key);
      }).catch(() => {});
    }
  },
  computed: {
    ...mapState({
      // 获取store里面的数据
      siteList: state => state.site.siteList
    }),
    ...mapGetters({
      listDefault: 'site/listDefault'
    }),
  },
  beforeMount () {
    this.listDefault;
  }
}
</script>

<style scoped lang="scss">
  .site{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding-top: 60px;
    box-sizing: border-box;
    position: relative;
    .header{
      font-size: 50px;
      font-weight: bolder;
      line-height: 130px;
      display: flex;
      align-items: center;
      text-align: center;
      position: relative;
      border-bottom: 1px solid #ccc;
      .header__left{
        position: absolute;
        left: 34px;
      }
      img{
        width: 54px;
        object-fit: contain;
      }
      span{
        flex: 1;
      }
    }
    .shippingAddress{
      margin: 0;
      list-style: none;
      .shippingAddress__items{
        height: 250px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 47px;
        padding: 0 34px 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        font-size: 40px;
        .name{
          display: flex;
          flex-flow: column;
          width: 112px;
          .items__name{
            text-align: center;
            width: 100%;
          }
          .default{
            display: inline-block;
            margin-top: 24px;
            padding: 8px 14px;
            box-sizing: border-box;
            font-size: 34px;
            color: #da2a2a;
            border: 1px solid #da2a2a;
          }
        }
        .inDetail{
          flex: 1;
          color: #676767;
          padding-left: 200px;
          box-sizing: border-box;
          p{
            margin: 0;
            padding-right: 40px;
            box-sizing: border-box;
          }
          .phone{
            font-size: 36px;
            color: #000;
            margin-bottom: 32px;
          }
        }
        .delete{
          width: 70px;
          object-fit: contain;
        }
      }
    }
    .new{
      position: absolute;
      bottom: 50px;
      display: flex;
      width: 100%;
      line-height: 160px;
      color: #fff;
      .new__btn{
        flex: 1;
        text-align: center;
        margin: 0 50px;
        background-color: #e24a41;
      }
    }
    .noAddress{
      flex: 1;
      background: url("./icon/noAddress-c73987af41.png") no-repeat center center/ 30%;
    }
  }
</style>
